<template>
     <view class="temp-box">
        <view class="item">
            <view class="tab"><text @click="swiertab(i)" :class="['tab-item', {active: current == i}]" v-for="(e,i) in studydata.list" :key="i">{{e.cat_name}}</text></view>
            <view class="swiper-box">
                <swiper class="swiper" @change="tabChange" :style="{height: swiperHiehgt + 'px'}" :current='current'>
                    <swiper-item v-for="(e,i) in studydata.list" :key="i">
                        <view :class="['swiper-item', 'swiper-item'+i]" v-if="e.article.length> 0">
                            <view class="item" v-for="(ee,ii) in e.article" :key="ii">
                                <view  class="imgg"><image :src="ee.pic" mode="widthFix"/></view>
                                <h4>{{ee.title}}</h4>
                                <p>{{ee.description.length>0?ee.description:'暂无描述'}}</p>
                            </view>                            
                        </view>
				        <view :class="['swiper-item', 'swiper-item'+i]" v-else><text style="display:block;padding:1rem 0;text-align:center;color:#909090;font-size:0.8rem;">抱歉，暂无数据</text></view>
                    </swiper-item>                  
                </swiper>
            </view>
        </view>
    </view>
</template>
<script>
export default {
     props: ['studydata'],
    data() {
        return {   
            current:0, 
            swiperHiehgt:0
        }
    },
    mounted() { 
        this.getElementHeight('.swiper-item0')
    }, 
    methods: {
        tabChange(e) {
            this.current = e.target.current
            this.getElementHeight('.swiper-item' + e.target.current)
        },
        swiertab(idx) {
            this.current = idx
            this.getElementHeight('.swiper-item' + idx)
        },
        getElementHeight(element) {
            setTimeout(()=>{
                let query = uni.createSelectorQuery().in(this)
                query.select(element).boundingClientRect()
                query.exec((res) => {
                    if (!res) {
                        this.getElementHeight()
                    }else {
                        this.swiperHiehgt = res[0].height
                    }
                })
            },20)
        }
    }
}
</script>
<style lang="scss">
    .temp-box{
        .item{
            .tab{padding:20rpx 0;position: relative;display:flex; align-items: center; 
                .tab-item{ overflow: hidden;text-overflow:ellipsis;white-space: nowrap;color:#909090;font-size:28rpx;position: relative;&.active{color: #0084ff !important;}}
                .tab-item+.tab-item{padding-left:20rpx;}
            }
        }
        .swiper-box{margin-top:3rpx;
            .swiper-item{                
                .item{
                    .imgg{height:252rpx;border-radius:8rpx;width:100%;overflow:hidden;background:#909090;image{width:100%;height:100%;display:block;}}
                    h4{font-size:30rpx;font-weight:700;letter-spacing: 1px;padding-top:22rpx; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;}
                    p{color:#909090;letter-spacing: 1px; overflow: hidden;text-overflow:ellipsis;white-space: nowrap;padding-top:6rpx;}
                }
                .item+.item{margin-top:34rpx;}
            }
        }
    }
</style>